﻿@page "/TreeList/PagingAndScrolling/Paging"

<DemoPageSectionComponent Id="TreeList-PagingAndScrolling-Paging" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        @inject IEmployeeTaskDataProvider EmployeeTaskDataProvider

        <DxTreeList @ref="TreeList"
                    Data="Data"
                    KeyFieldName="Id"
                    ParentKeyFieldName="ParentId"
                    ColumnResizeMode="TreeListColumnResizeMode.NextColumn"
                    TextWrapEnabled="false"
                    PageSize="10"
                    PagerPosition="@CurrentPagerPosition"
                    PageSizeSelectorVisible="true"
                    PageSizeSelectorItems="@(new int[] { 10, 20, 50 })"
                    PageSizeSelectorAllRowsItemVisible="true"
                    PagerSwitchToInputBoxButtonCount="10"
                    PagerVisibleNumericButtonCount="10"
                    SizeMode="Params.SizeMode">
            <Columns>
                <DxTreeListDataColumn FieldName="Name" Caption="Task" SortOrder="TreeListColumnSortOrder.Ascending" />
                <DxTreeListDataColumn FieldName="EmployeeName" Caption="Assigned To" TextAlignment="TreeListTextAlignment.Left" Width="200px"/>
                <DxTreeListDataColumn FieldName="StartDate" Width="100px"/>
                <DxTreeListDataColumn FieldName="DueDate" Width="100px"/>
                <DxTreeListDataColumn FieldName="Priority" Width="100px" CaptionAlignment="TreeListTextAlignment.Center" TextAlignment="TreeListTextAlignment.Center">
                    <CellDisplayTemplate>
                        @{
                            var displayText = TreeListRenderHelper.EmployeeTaskPriorityToString((EmployeeTask)context.DataItem);
                        }
                        <span title="@displayText  priority">@displayText</span>
                    </CellDisplayTemplate>
                </DxTreeListDataColumn>
                <DxTreeListDataColumn Caption="Progress" FieldName="Status" Width="100px" CaptionAlignment="TreeListTextAlignment.Center" TextAlignment="TreeListTextAlignment.Center">
                    <CellDisplayTemplate>
                        <span>@TreeListRenderHelper.EmployeeTaskStatusToString((EmployeeTask)context.DataItem)</span>
                    </CellDisplayTemplate>
                </DxTreeListDataColumn>
            </Columns>
            <ToolbarTemplate>
                <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
                    <Items>
                        <DxToolbarItem BeginGroup="true" Alignment="ToolbarItemAlignment.Left">
                            <Template Context="toolbar_item_context">
                                <div class="d-flex flex-row align-items-center h-100">
                                    <div class="me-2">Pager position:</div>
                                    <DxComboBox Data="PagerPositions"
                                                ValueFieldName="@nameof(PagerPositionItem.Value)"
                                                TextFieldName="@nameof(PagerPositionItem.Text)"
                                                @bind-Value="CurrentPagerPosition"
                                                CssClass="ow-180" />
                                </div>
                            </Template>
                        </DxToolbarItem>
                    </Items>
                </DxToolbar>
            </ToolbarTemplate>
        </DxTreeList>

        @code {
            static readonly List<PagerPositionItem> PagerPositions = new List<PagerPositionItem>() {
                new PagerPositionItem(TreeListPagerPosition.Bottom, "Bottom"),
                new PagerPositionItem(TreeListPagerPosition.Top, "Top"),
                new PagerPositionItem(TreeListPagerPosition.TopAndBottom, "Top and bottom"),
            };

            ITreeList TreeList { get; set; }
            object Data { get; set; }

            TreeListPagerPosition CurrentPagerPosition { get; set; }

            protected override void OnInitialized () {
                Data = EmployeeTaskDataProvider.GenerateData();
                CurrentPagerPosition = TreeListPagerPosition.Bottom;
            }

            record PagerPositionItem(TreeListPagerPosition Value, string Text);
        }

    </ChildContentWithParameters>
</DemoPageSectionComponent>
